<template>
	<div class="content-box add-good-argument">
		<el-form ref="formRef" class="good-service-form" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="参数名称" prop="name">
				<el-input v-model="form.name" :maxlength="30" />
			</el-form-item>
			<el-form-item label="参数排序" prop="order">
				<el-input-number
					class="num-left"
					@blur="
						() => {
							form.order = form.order || 0;
						}
					"
					:max="999999999"
					:min="0"
					:controls="false"
					v-model="form.order"
				/>
			</el-form-item>
			<el-form-item label="参数详情" prop="details">
				<el-button type="primary" link class="mb15 mt6" :disabled="form.details.length >= 20" @click="addDetailItem"
					>+ 新增参数({{ form.details.length }}/20)</el-button
				>
				<el-table class="form-table" :data="form.details">
					<el-table-column label="参数名称" prop="name" align="center">
						<template #default="{ row, $index }">
							<el-form-item :prop="`details[${$index}].name`" :rules="rules.name" :label-width="1">
								<el-input v-model="row.name" :maxlength="50" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="参数值" prop="value" align="center">
						<template #default="{ row, $index }">
							<el-form-item :prop="`details[${$index}].value`" :rules="rules.value" :label-width="1">
								<el-input v-model="row.value" :maxlength="50" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="排序" prop="order" align="center">
						<template #default="{ row, $index }">
							<el-form-item :prop="`details[${$index}].order`" :label-width="1">
								<el-input-number
									:precision="0"
									:controls="false"
									:min="0"
									:max="999999999"
									@blur="
										() => {
											row.order = row.order || 0;
										}
									"
									v-model="row.order"
									:step="0"
								/>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="操作" prop="order" align="center">
						<template #default="scope">
							<el-button type="primary" link @click="delDetailItem(scope)"> 删除 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label-width="0">
				<div class="flex-start w-full">
					<el-button @click="back">取消</el-button>
					<el-button type="primary" v-debounce="onSubmit">保存</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="tsx">
import { FormRules, ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { fetchCreateArgument, fetchUpdateArgument, fetchArgumentDetail } from '/@/api/goods';
const route = useRoute();
const router = useRouter();

const formRef = ref();
const form = ref<any>({
	name: '',
	order: 0,
	details: [],
});

const editId = ref();

//校验规则
const rules = reactive<FormRules<any>>({
	name: [{ required: true, trigger: 'blur', message: '参数名称不能为空' }],
	value: [{ required: true, trigger: 'blur', message: '参数值不能为空' }],
	details: [{ required: true, trigger: 'blur', message: '参数详情不能为空' }],
});

const onSubmit = async () => {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			const res = editId.value ? await fetchUpdateArgument(form.value) : await fetchCreateArgument(form.value);
			if (res.code == 200) {
				ElMessage.success(editId.value ? '编辑商品参数成功' : '新增商品参数成功');
				back();
			} else {
				ElMessage.error(res.msg);
			}
		}
	});
};

const back = () => {
	router.push('/goods/argument');
};

const addDetailItem = () => {
	form.value.details.push({
		name: '',
		value: '',
		order: 0,
	});
};
const delDetailItem = (scope: any) => {
	form.value.details.splice(scope.$index, 1);
};

onMounted(async () => {
	editId.value = route.params.id;
	if (editId.value) {
		const res = await fetchArgumentDetail({ id: editId.value });
		if (res.code === 200) {
			form.value = res.data;
		}
	}
});
</script>

<style lang="scss">
.add-good-argument {
	.el-form-item {
		.el-input,
		.el-select,
		.el-input-number {
			width: 100%;
			max-width: 450px;
		}
	}
	.el-table {
		.el-form-item {
			width: 80%;
			max-width: 150px;
			margin: auto;
		}
	}
}
</style>
